<template>
  <ul>
    <li><router-link to="/home">Home</router-link></li>
    <li><router-link to="/about">about</router-link></li>
  </ul>
  <!-- <router-view /> -->

  <!-- 
    router-view 作用域插槽 Component
      Component 组件：要渲染的某个路由组件

    component是vue的内置组件
      默认不渲染任何内容，
      is属性的值，就要渲染的内容
  -->
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <keep-alive :max="10">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<script lang="ts" setup></script>

<style scoped>
/* 
  隐藏 到 显示
*/
.fade-enter-from {
  opacity: 0;
  transform: translateX(50px);
}
.fade-enter-active {
  transition: 0.5s opacity, 0.5s transform;
}
.fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 
  显示 到 隐藏
*/
.fade-leave-from {
}
.fade-leave-active {
}
.fade-leave-to {
}
</style>
